<template>
	<div class="div1">
		<el-backtop target=".div1"></el-backtop>
		<!-- 头部 -->
		<!-- <div class="heads">
			<div class="big-center">
				<div class="center">
					<el-row :gutter="20">
						<el-col :span="8">
							<div class="top-left">
								<div class="logoname">欢迎进入xx</div>
								<div class="logins">
									<span v-if="userId == ''" @click="goAbute('/login')">请登录</span>
									<span v-if="userId == ''" class="xian">|</span>
									<span v-if="userId == ''" @click="
										goAbute('/login?navgatorIndex=3')
										">免费注册</span>
									<span v-if="userId" @click="quit()">退出登录</span>
								</div>
							</div>
						</el-col>
						<el-col :span="5">
							<div class="kong"></div>
						</el-col>
						<el-col :span="11">
							<div class="top-right">
								<span @click="goAbute('/?index=0')">首页</span>
								<span @click="goShoppingCar('/order')">个人中心</span>
								<span>
									<span @click="goChat()" class="el-dropdown-link" style="color: #999;">
										客户服务
									</span>
								</span>
								<span>
									<el-dropdown @command="handleCommand">
										<span class="el-dropdown-link" style="color: #999;">
											网站导航<i class="el-icon-arrow-down el-icon--right"></i>
										</span>
										<el-dropdown-menu slot="dropdown">
											<div style="width: 200px;display: inline-block;">
												<el-dropdown-item v-for="(item,
													index) in list" :key="index" :command="item.url">{{
														item.name
													}}</el-dropdown-item>
											</div>
										</el-dropdown-menu>
									</el-dropdown>
								</span>
								<span>
									<el-dropdown>
										<span class="el-dropdown-link" style="color: #999;">
											手机版<i class="el-icon-arrow-down el-icon--right"></i>
										</span>
										<el-dropdown-menu slot="dropdown">
											<el-dropdown-item>
												<img src="../../assets/foot/app.png" />
											</el-dropdown-item>
										</el-dropdown-menu>
									</el-dropdown>
								</span>
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
			<div class="big-centers">
				<div class="center">
					<div class="cons left" @click="goHome()">
						<img src="../../assets/head/logo.png" />
					</div>
					<div class="cons cont">
						<div class="searchs">
							<el-input placeholder="请输入内容" v-model="value" class="input-with-select">
								<el-button slot="append" icon="el-icon-search" @click="sousuo()">搜索</el-button>
							</el-input>
						</div>
						<div class="search-list">
							<div v-for="(item, index) in searchList" :key="index" :class="index <= 2 ? 'one' : 'four'"
								@click="goSearch(item)">
								<span v-if="index == 0" class="re bao">爆</span>
								<span v-if="index == 1 || index == 2" class="re">热</span>
								{{ item }}
							</div>
						</div>
					</div>
					<div class="cons right">
						<div class="myCars">
							<div>
								<img class="carimg" src="../../assets/head/card.png" />
								<span class="myCar" @click="goShop('/shoppingCar')">我的购物车</span>
							</div>
							<el-badge v-if="dataC" :value="dataC.length" class="item">
								<img class="carimg" src="../../assets/head/card.png" />
								<span class="myCar" @click="goShoppingCar('/shoppingCar')">我的购物车</span>
							</el-badge>
							<div>
								<img class="carimg" src="../../assets/head/card.png" />
								<span class="myCar" @click="goShoppingCar('/shoppingCar')">我的购物车</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div> -->

		<Head :data="searchList" @callParentMethod="parentMethod" :message="searchV"></Head>
		<!-- 中部内容 -->
		<div style="background: #F6F5F7;">
			<div class="tong three">
				<div class="table_main">
					<table>
						<tbody>
							<!--							<tr>
								<th class="left-th">分类</th>
								<th class="right-th">
									<div v-for="(item,index) in classList" :key="index" :class="index==active2?'active2':''" class="className" @click="classOn(index)">{{item}}</div>
								</th>
							</tr>
							<tr>
								<th class="left-th">筛查</th>
								<th class="right-th">
									月销量<input :value="number1" type="number" class="yxl" />
									价格<input :value="number2" type="number" class="yxl jiage1" />~<input :value="number3" type="number" class="yxl jiage1" />
								</th>
							</tr>-->
							<tr>
								<th class="left-th">排序</th>
								<th class="border-bt right-th">
									<div v-for="(item, index) in classList1" :key="index" :class="index == active3 ? 'active2' : ''
										" class="className" @click="classOn1(index, item)">
										{{ item.title }}
									</div>
								</th>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="tong three" v-if="dataList.totalElements != 0">
				<!--				<goodsItem :data = "dataList.content"></goodsItem>-->
				<goodsItem :isVip="relationId != 'null' ? true : false" :data="dataList.content"></goodsItem>
			</div>
			<el-empty v-else description="暂无数据" :image-size="300"></el-empty>
			<div v-if="dataList.totalElements != 0" style="text-align: center;margin: 10px;">
				<el-pagination @current-change="BrowseChange" :page-size="size" :current-page="page"
					layout="prev, pager, next" :total="dataList.totalElements">
				</el-pagination>
			</div>
			<!--			<div class = "tong three">-->
			<!--				<el-pagination background style = "text-align: center;padding-bottom: 50px;" layout = "prev, pager, next" :total = "1000"-->
			<!--							   @current-change = "handleCurrentChange" :current-page = "page">-->
			<!--				</el-pagination>-->
			<!--			</div>-->
		</div>
		<!-- 底部 -->
		<Foots></Foots>
	</div>
</template>

<script>
import Head from "@/components/head.vue";
import Foots from "@/components/foots.vue";
import goodsItem from "../../components/goods-item";
import { Loading } from "element-ui";

export default {
	components: {
		Head,
		Foots,
		goodsItem
	},
	data() {
		return {
			dataC: [],
			value: "",
			list: [
				{ name: "首页", url: "/?index=0" },
				{ name: "热卖榜单", url: "/?index=1" },
				{ name: "精选好物", url: "/?index=2" },
				{ name: "每日上线", url: "/?index=3" },
				{ name: "拼团购", url: "/?index=4" },
				{ name: "个人中心", url: "/order" }
			],
			relationId: window.localStorage.getItem("relationId"), //邀请码
			page: 1,
			size: 10,
			searchList: [],
			active1: 0,
			active2: 0,
			active3: 0,
			number1: "",
			number2: "",
			number3: "",
			dataList: [],
			classList: [
				"全部",
				"女装",
				"男装",
				"美妆",
				"内衣",
				"配饰",
				"箱包",
				"鞋品",
				"美食",
				"电器",
				"母婴",
				"儿童"
			],
			classList1: [
				{
					title: "默认排序",
					type: "createAt"
				},
				{
					title: "销量",
					type: "sales"
				},
				// {
				// 	title: '佣金',
				// 	type: 'commissionPrice'
				// },
				{
					title: "超低价",
					type: "price"
				}
			],
			sort: "createAt",
			type: "",
			title: "",
			searchV:''
		};
	},
	created() {
		this.title = this.$route.query.title;
		this.value = this.$store.state.sousuoValue;
		this.type = this.$route.query.type;
		this.getData();
		this.getSearchList();
		this.getData()
	},
	computed: {
		userId() {
			// return this.$store.state.userId
			return this.$cookie.get("userId");
		}
	},	
	destroyed(){
		this.$store.commit('sousuoValue','')
		console.log("点击查看全部");
	},
	methods: {
		parentMethod(sousuoValue) {
			// console.log('aaadsddd',sousuoValue)
			this.value = sousuoValue
			this.getData()
		},
		getSearchList() {
			this.$http({
				url: this.$http.adornUrl("/common/type/285"), //热词
				method: "get"
			}).then(({ data }) => {
				this.searchList = data.data.value.split(",");
			});
		},
		BrowseChange(val) {
			console.log(val);
			this.page = val;
			this.getData();
		},
		goShoppingCar(url) {
			if (this.userId) {
				this.$router.push({
					path: url
				});
			} else {
				this.$router.push({
					path: "/login"
				});
			}
		},
		goHome() {
			this.$router.push({
				path: "/"
			});
		},
		goAbute(url) {
			this.$router.push({
				path: url
			});
		},
		goShop(url) {
			if (this.userId) {
				this.$router.push({
					path: url
				});
			} else {
				this.$router.push({
					path: "/login"
				});
			}
		},
		handleCommand(command) {
			this.$router.push({
				path: command
			});
		},
		sousuo() {
			// if (this.value == '') {
			// 	this.$message('搜索内容不能为空')
			// 	return
			// }
			this.getData();
		},
		getData() {
			let loadingInstance = Loading.service({
				lock: true,
				text: "加载中……",
				background: "rgba(0, 0, 0, 0.7)"
			});
			this.$http({
				url: this.$http.adornUrl("/goods/userList"),
				method: "get",
				params: this.$http.adornParams({
					userId: this.userId,
					page: this.page - 1,
					size: 10,
					type: this.type,
					title: this.value,
					sort: this.sort,
					brandId: ""
				})
			}).then(({ data }) => {
				this.$nextTick(() => {
					loadingInstance.close();
				});
				if (data && data.status === 0) {
					let returnData = data.data;
					this.dataList = returnData;
				}
			});
		},

		onNavigation1(index) {
			this.active1 = index;
		},
		classOn(index) {
			this.active2 = index;
		},
		classOn1(index, item) {
			this.active3 = index;
			this.sort = item.type;
			this.getData();
		},
		onClick(id) { },
		handleCurrentChange(val) {
			this.page = val;
		},
		quanbuClick() {
			console.log("点击查看全部");
		},
		goSearch(e) {
			this.value = e;
			this.getData();
		},
		//退出登录
		quit() {
			this.$store.commit("updateUserId", "");
			this.$store.commit("updateRelationId", "");

			this.$cookie.set("uuid", "");
			this.$cookie.set("userId", "");
			this.$cookie.set("relationId", "");
			this.$cookie.set("image_url", "");
			this.$cookie.set("nickName", "");
			this.$cookie.set("phone", "");
			this.$router.go(0);
		},
		goChat() {
			if (this.userId) {
				this.$http({
					url: this.$http.adornUrl("/chat/save"),
					method: "post",
					data: this.$http.adornData({
						storeHead: "地摊兄自营店铺",
						storeId: "0",
						storeName: "",
						userId: this.$cookie.get("userId"),
						userName: this.$cookie.get("nickName")
					})
				}).then(({ data }) => {
					let returnData = data.data;
					this.$router.push({
						path: "/vueMchat?chatId=" + returnData.chatId
					});
				});
			} else {
				this.$router.push({
					path: "/login"
				});
			}
		}
	}
};
</script>

<style scoped="scoped">
.div1 {
	height: 100vh;
	overflow-x: hidden;
}

/* 导航 */
.navigation {
	background: #EA7408;
	height: 40px;
	line-height: 40px;
	color: #fff;
}

.navList {
	width: 1200px;
	margin: 0 auto;
}

/* 第一部分 */
.tong {
	width: 1200px;
	margin: 0 auto;
	margin-top: 15px;
}

.active1 {
	background: #EA7408;
	color: #fff;
}

/* 筛选表格 */
.table_main table {
	width: 100%;
}

.table_main {
	border: 1px solid #e8e8e8;
}

table tr {
	/* border-bottom: 1px solid #e8e8e8; */
	background: #fff;
}

table tr th {
	padding: 16px 24px;
	/* border-right: 1px solid #e8e8e8; */
	/* border-bottom: 1px solid #e8e8e8; */
}

table tr td {
	padding: 16px 24px;
	/* border-right: 1px solid #e8e8e8; */
	border-bottom: 1px solid #e8e8e8;
}

table th {
	color: rgba(0, 0, 0, 0.85);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
}

.border-rt {
	border-right: none !important;
}

.border-bt {
	border-bottom: none !important;
}

.left-th {
	color: #333;
	width: 50px;
	line-height: 50px;
}

.right-th {
	text-align: left;
	padding-left: 30px;
}

.className {
	display: inline-block;
	/* width: 50px; */
	background-color: #fff;
	font-size: 14px;
	color: #333;
	margin: 10px 5px;
	padding: 0 20px;
	text-align: center;
	cursor: pointer;
}

.active2 {
	background: #EA7408;
	color: #fff;
	border-radius: 4px;
}

.yxl {
	width: 70px;
	margin: 0 50px 0 10px;
	border: 1px solid #e6e6e6;
	height: 30px;
	line-height: 30px;
	border-radius: 4px;
}

.jiage1 {
	margin: 0 20px;
	width: 50px;
}

.big-center {
	width: 100%;
	height: 24px;
	line-height: 24px;
	color: #999;
	font-size: 14px;
	background: #e6e6e6;
}

.center {
	width: 1200px;
	margin: 0 auto;
}

.top-left {
	text-align: left;
}

.top-left div {
	display: inline-block;
}

.logoname {
	width: 40%;
}

.logins {
	width: 50%;
	text-align: center;
}

.logins span {
	color: #999;
	text-decoration: none;
}

.logins span:hover {
	color: #ff0d18;
	cursor: pointer;
}

.xian {
	margin: 0 10px;
}

/deep/.el-pagination .el-pager .active {
	background: #EA7408 !important;
	color: #fff;
}

/deep/.el-pagination .el-pager .active:hover {
	cursor: pointer;
	color: #fff !important;
}

.kong {
	width: 100%;
	height: 24px;
}

.top-right {
	text-align: right;
}

.top-right span {
	display: inline-block;
	margin-left: 20px;
	color: #999;
	text-decoration: none;
}

.top-right span:hover {
	color: #ff0d18;
	cursor: pointer;
}

.big-centers {
	width: 100%;
	height: 120px;
	/* line-height: 120px; */
}

.big-centers .center .cons {
	display: inline-block;
}

.left {
	width: 30%;
	text-align: left;
}

.left img {
	position: relative;
	bottom: 6px;
}

.cont {
	width: 49%;
}

.searchs {
	padding-top: 26px;
}

.search-list {
	text-align: left;
	font-size: 14px;
	color: #999;
	margin-top: 10px;
}

.search-list div {
	display: inline-block;
	width: 16%;
	cursor: pointer;
}

.one {
	color: #ff0d18;
}

.one .re {
	display: inline-block;
	font-size: 12px;
	border: 1px solid #ff0d18;
	/* width: 14px;
		height: 14px; */
	border-radius: 2px;
	background: #ffc1c1;
	padding: 0 2px;
	/* margin-right: 6px; */
}

.right {
	width: 20%;
	text-align: right;
	color: #EA7408;
	font-size: 18px;
}

.myCars {
	position: relative;
	bottom: 20px;
	border: 2px solid #EA7408;
	border-radius: 4px;
	width: 65%;
	text-align: center;
	height: 45px;
	line-height: 45px;
	margin-left: 35%;
	cursor: pointer;
}

.carimg {
	position: relative;
	top: 3px;
}

.el-input-group__append,
.el-input-group__prepend {
	background: #EA7408 !important;
	color: #fff !important;
	border: 1px solid #EA7408 !important;
}
</style>
